// 导入路由
import { Route, Routes } from 'react-router-dom'
import { AuthRoute } from '@/components/AuthRoute'
import './index.scss'
// 导入页面组件
// 导入必要组件
import { lazy, Suspense } from 'react'
import { HistoryRouter, history } from './utils/history'
// 按需导入路由组件
const Login = lazy(() => import('./pages/Login'))
const Layout = lazy(() => import('./pages/Layout'))
const Home = lazy(() => import('./pages/Home'))
const Article = lazy(() => import('./pages/Article'))
const Publish = lazy(() => import('./pages/Publish'))
const Mode = lazy(() => import('./pages/Mode'))
function App () {
  return (
    <HistoryRouter history={history}>
      {/* <BrowserRouter> */}
      <div className="App">
        <Suspense
          fallback={
            <div
              style={{
                textAlign: 'center',
                marginTop: 200
              }}
            >
              loading...
            </div>
          }
        >
          <Routes>
            {/* 需要鉴权的路由 */}
            <Route path="/" element={
              <AuthRoute>
                <Layout />
              </AuthRoute>}>
              {/* 二级路由默认页面 */}
              <Route index element={<Home />} />
              <Route path="article" element={<Article as="li" />} />
              <Route path="publish" element={<Publish />} />
              <Route path="mode" element={<Mode />} />
            </Route>
            {/* 不需要鉴权的路由 */}
            <Route path="/login" element={<Login />} />
          </Routes>
        </Suspense>
      </div>
      {/* </BrowserRouter> */}
    </HistoryRouter>
  )
}
export default App
